<template>
  <div class="monitoringModelConfiguration">
    <PageTitle :goBack="false" title="监控模型配置" :border="true" />
    <div class="myCardCss" style="width: 100%">
      <PageTitle :goBack="false" title="模型配置" :level="2" :border="false" :padding="false" />
      <a-form :model="formData" :label-col="6" :wrapper-col="12">
        <a-form-item label="风险类型">
            <a-checkbox
                    v-model:checked="checkAll"
                    :indeterminate="indeterminate"
                    @change="onCheckAllChange"
            >
                全部
            </a-checkbox>
            <a-checkbox
                    v-model:checked="checkAll1"
                    :indeterminate="indeterminate1"
                    @change="onCheckAllChange1"
            >
                工商风险
            </a-checkbox>
            <a-checkbox
                    v-model:checked="checkAll2"
                    :indeterminate="indeterminate2"
                    @change="onCheckAllChange2"
            >
                司法风险
            </a-checkbox>
        </a-form-item>
        <a-form-item label="风险维度" v-if="checkAll1">
          <a-checkbox-group v-model:value="formData.riskDimensions1" @change="setData(1)">
            <a-checkbox :value="item.dimensionName" name="type1" v-for="(item, index) in list1" :key="index">{{ item.dimensionName }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="风险维度" v-if="checkAll2">
          <a-checkbox-group v-model:value="formData.riskDimensions2" @change="setData(2)">
            <a-checkbox :value="item.dimensionName" name="type2" v-for="(item, index) in list2" :key="index">{{ item.dimensionName }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </div>
    <div class="myCardCss" style="margin-top: 8px; width: 100%">
      <PageTitle :goBack="false" title="监控推送时间" :level="2" :border="false" :padding="false" />
      <a-form :model="formData" :label-col="6" :wrapper-col="12">
        <a-form-item label="推送频率">
          <a-radio-group name="radioGroup" v-model:value="formData.pushInterval">
            <a-radio :value="1">每天</a-radio>
            <a-radio :value="2">工作日（排除节假日）</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="推送时段">
<!--          <a-range-picker-->
<!--            v-model:value="formData.times"-->
<!--            format="HH"-->
<!--            valueFormat="HH"-->
<!--            :placeholder="['开始时间', '结束时间']"-->
<!--            :showTime="true"-->
<!--            style="width: 200px"-->
<!--          />-->
          <a-time-picker format="HH:00:00" value-format="HH:mm:ss" v-model:value="formData.pushTimeStart" />
           ——
          <a-time-picker format="HH:00:00" value-format="HH:mm:ss" v-model:value="formData.pushTimeEnd" />
        </a-form-item>
      </a-form>
    </div>
    <div class="myCardCss" style="margin-top: 8px; width: 100%">
      <PageTitle :goBack="false" title="监控接收方式" :level="2" :border="false" :padding="false" />
      <a-form :model="formData" :label-col="6" :wrapper-col="12">
        <a-form-item label="接收方式">
          <a-checkbox-group v-model:value="formData.pushType">
            <a-checkbox :value="1" name="type">站内信</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </div>
    <div class="separate"></div>
    <div class="myCardCss" style="width: 100%">
      <a-button type="primary" danger style="margin-right: 12px;border-radius: 4px;" @click="saveData">保存</a-button>
      <a-button @click="resetData" style="border-radius: 4px;">重置</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import {getConfig, getOptions, saveConfig} from '/@/api/monitoringCenter';
  let checkAll = ref(false)
  let indeterminate = ref(false)
  let checkAll1 = ref(false)
  let indeterminate1 = ref(false)
  let checkAll2 = ref(false)
  let indeterminate2 = ref(false)
  const onCheckAllChange = (e: any) => {
      if (e.target.checked) {
          checkAll.value = true
          indeterminate.value = false
          checkAll1.value = true
          indeterminate1.value = false
          checkAll2.value = true
          indeterminate2.value = false
          formData.value.riskDimensions1 = list1.value.map(item => item.dimensionName)
          formData.value.riskDimensions2 = list2.value.map(item => item.dimensionName)
      } else {
          checkAll.value = false
          indeterminate.value = false
          checkAll1.value = false
          indeterminate1.value = false
          checkAll2.value = false
          indeterminate2.value = false
          formData.value.riskDimensions1 = []
          formData.value.riskDimensions2 = []

      }
  };
  const onCheckAllChange1 = (e: any) => {
      if (e.target.checked) {
          formData.value.riskDimensions1 = list1.value.map(item => item.dimensionName)
          checkAll1.value = true
          indeterminate1.value = false
          if (checkAll2.value) {
              checkAll.value = true
              indeterminate.value = false
          } else {
              checkAll.value = true
              indeterminate.value = true
          }
      } else {
          formData.value.riskDimensions1 = []
          checkAll1.value = false
          indeterminate1.value = false
          if (!checkAll2.value) {
              checkAll.value = false
              indeterminate.value = false
          } else {
              checkAll.value = true
              indeterminate.value = true
          }
      }
  };
  const onCheckAllChange2 = (e: any) => {
      if (e.target.checked) {
          formData.value.riskDimensions2 = list2.value.map(item => item.dimensionName)
          checkAll2.value = true
          indeterminate2.value = false
          if (checkAll1.value) {
              checkAll.value = true
              indeterminate.value = false
          } else {
              checkAll.value = true
              indeterminate.value = true
          }
      } else {
          formData.value.riskDimensions2 = []
          checkAll2.value = false
          indeterminate2.value = false
          if (!checkAll1.value) {
              checkAll.value = false
              indeterminate.value = false
          } else {
              checkAll.value = true
              indeterminate.value = true
          }
      }
  };
  function setData(type: number) {
      if (type === 1) {
          if (formData.value.riskDimensions1.length === 0) {
              checkAll1.value = false
              indeterminate1.value = false
              if (!checkAll2.value) {
                  checkAll.value = false
                  indeterminate.value = false
              }
              return
          }
          if (formData.value.riskDimensions1.length === list1.value.length) {
              checkAll1.value = true
              indeterminate1.value = false
              if (formData.value.riskDimensions2.length === list2.value.length) {
                  checkAll.value = true
                  indeterminate.value = false
              }
          } else {
              checkAll1.value = true
              indeterminate1.value = true
              checkAll.value = true
              indeterminate.value = true
          }
      }
      if (type === 2) {
          if (formData.value.riskDimensions2.length === 0) {
              checkAll2.value = false
              indeterminate2.value = false
              if (!checkAll1.value) {
                  checkAll.value = false
                  indeterminate.value = false
              }
              return
          }
          if (formData.value.riskDimensions2.length === list2.value.length) {
              checkAll2.value = true
              indeterminate2.value = false
              if (formData.value.riskDimensions1.length === list1.value.length) {
                  checkAll.value = true
                  indeterminate.value = false
              }
          } else {
              checkAll2.value = true
              indeterminate2.value = true
              checkAll.value = true
              indeterminate.value = true
          }
      }
  }
  let formData = ref({
    riskType: [],
    riskType1: [],
    riskType2: [],
    riskDimensions1: [],
    riskDimensions2: [],
    pushInterval: 2, // 1: 每一天 2:工作日
    times: [] as any, // 推送时段
    pushType: [1], // 站内信
    pushTimeStart: '09:00:00',
    pushTimeEnd: '18:00:00',
  });
  async function getData() {
    let res = await getConfig();
    if (!res) {
      return
    }
    formData.value.pushInterval = res.pushInterval;
    formData.value.pushTimeStart = res.pushTimeStart;
    formData.value.pushTimeEnd = res.pushTimeEnd;
    formData.value.pushType = res.pushType ? [1] : [];
    for (let i = 0; i < res.riskDimensions.length; i++) {
      for (let j = 0; j < list1.value.length; j++) {
        if (res.riskDimensions[i] === list1.value[j].dimensionName) {
          formData.value.riskDimensions1.push(list1.value[j].dimensionName)
        }
      }
      for (let k = 0; k < list2.value.length; k++) {
        if (res.riskDimensions[i] === list2.value[k].dimensionName) {
          formData.value.riskDimensions2.push(list2.value[k].dimensionName)
        }
      }
    }
    if (formData.value.riskDimensions1.length === list1.value.length && formData.value.riskDimensions2.length === list2.value.length) {
      checkAll.value = true;
      indeterminate.value = false;
      checkAll1.value = true;
      indeterminate1.value = false;
      checkAll2.value = true;
      indeterminate2.value = false;
    } else if (formData.value.riskDimensions1.length || formData.value.riskDimensions2.length) {
        checkAll.value = true;
        indeterminate.value = true;
    } else {
        checkAll.value = false;
        indeterminate.value = false;
    }
    // 工商风险回显
    if (formData.value.riskDimensions1.length === 0) {
        checkAll1.value = false;
        indeterminate1.value = false;
    } else if (formData.value.riskDimensions1.length === list1.value.length) {
        checkAll1.value = true;
        indeterminate1.value = false;
    } else {
        checkAll1.value = true;
        indeterminate1.value = true;
    }
    // 司法风险回显
      if (formData.value.riskDimensions2.length === 0) {
          checkAll2.value = false;
          indeterminate2.value = false;
      } else if (formData.value.riskDimensions2.length === list2.value.length) {
          checkAll2.value = true;
          indeterminate2.value = false;
      } else {
          checkAll2.value = true;
          indeterminate2.value = true;
      }
  }
  async function saveData() {
    let riskDimensions = formData.value.riskDimensions1.concat(formData.value.riskDimensions2)
    let queryData = {
      riskDimensions: riskDimensions,
      pushInterval: formData.value.pushInterval,
      pushTimeStart: formData.value.pushTimeStart,
      pushTimeEnd: formData.value.pushTimeEnd,
      pushType: formData.value.pushType.length ? 1 : 0,
    };
    // if (!queryData.pushType) {
    //   delete queryData.pushType
    // }
    await saveConfig(queryData);
  }
  function resetData() {
    formData.value = {
      riskType: [],
      riskType1: [],
      riskType2: [],
      riskDimensions1: [],
      riskDimensions2: [],
      pushInterval: 2, // 1: 每一天 2:工作日
      times: [] as any, // 推送时段
      pushType: [1], // 站内信
      pushTimeStart: '09:00:00',
      pushTimeEnd: '18:00:00',
    };
  }
  let optionsList = ref([])
  let list1 = ref([])
  let list2 = ref([])
  // 监控动态下拉
  async function getSeletOpition() {
    const res = await getOptions()
    optionsList.value = res
    list1.value = res[0].children
    list2.value = res[1].children
    getData()
  }
  getSeletOpition()
</script>
<style lang="less" scoped>
.monitoringModelConfiguration{
}
.ant-form label{
  margin-left: 8px !important;
}
.separate {
  height: 8px;
  width: 100%; 
  background: transparent
}
</style>
